<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title> 
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="../css/mui.min.css" rel="stylesheet" />
	
	<link rel="stylesheet" href="../css/swiper.css" />
	<link rel="stylesheet" href="../css/newidex.css" /> 
	<style type="text/css">
		.swiper-container{
			width: 100%;
		}
	</style>
</head> 
<body class="white"> 
	<div class="mui-content" style="width: 100%;">
		<div class="" id="vueMain">
			<div id="topSwiper">  
				<div class="swiper-container">
			    		<div class="swiper-wrapper">
		    				<div class="swiper-slide" :data-type="item.type" :data-gid="item.goods_id" :data-url="item.url" :data-title="item.name">
		    					<img src="../icon/mask-big.jpg" class="maximg" />
		    				</div>
			    		</div>  
			    		<div class="swiper-pagination"></div>
			    	</div>
			</div>
			<div class="clstype">
				<div class="box">
					<div class="mui-row"> 
						<div class="mui-col-sm-3 mui-col-xs-3 link"  _id="newList" :_title="item.name" _href="newList.html" :_extras="'type='+item.id"> 
							<img  src="../icon/mask-min.png" alt=""   />
							<p></p>
						</div>
						<div class="mui-col-sm-3 mui-col-xs-3 link"  _id="newList" :_title="item.name" _href="newList.html" :_extras="'type='+item.id"> 
							<img  src="../icon/mask-min.png" alt=""   />
							<p></p>
						</div>
						<div class="mui-col-sm-3 mui-col-xs-3 link"  _id="newList" :_title="item.name" _href="newList.html" :_extras="'type='+item.id"> 
							<img  src="../icon/mask-min.png" alt=""   />
							<p></p>
						</div>
						<div class="mui-col-sm-3 mui-col-xs-3 link"  _id="newList" :_title="item.name" _href="newList.html" :_extras="'type='+item.id"> 
							<img  src="../icon/mask-min.png" alt=""   />
							<p></p>
						</div>
						<div class="mui-col-sm-3 mui-col-xs-3 link"  _id="newList" :_title="item.name" _href="newList.html" :_extras="'type='+item.id"> 
							<img  src="../icon/mask-min.png" alt=""   />
							<p></p>
						</div>
						<div class="mui-col-sm-3 mui-col-xs-3 link"  _id="newList" :_title="item.name" _href="newList.html" :_extras="'type='+item.id"> 
							<img  src="../icon/mask-min.png" alt=""   />
							<p></p>
						</div>
						<div class="mui-col-sm-3 mui-col-xs-3 link"  _id="newList" :_title="item.name" _href="newList.html" :_extras="'type='+item.id"> 
							<img  src="../icon/mask-min.png" alt=""   />
							<p></p>
						</div>
						<div class="mui-col-sm-3 mui-col-xs-3 link"  _id="newList" :_title="item.name" _href="newList.html" :_extras="'type='+item.id"> 
							<img  src="../icon/mask-min.png" alt=""   />
							<p></p>
						</div>
					</div>
				</div>
			</div> 
			<div class="hot-item serverpingtai" >
				
			</div>
			<div class="hot-item not-border">
				<div class="mui-content-padded hot-site">
					<div class="hot-title"><span>最热场地</span></div>
					<div class="mui-row hot-place">
						<div class="mui-col-xs-6 mui-col-sm-6 opens" :data-title="item.name" :data-type="item.type"  :data-id="item.goods_id" :data-url="item.url">
							<img src="../icon/mask-small.png" alt="" class="maximg" v-if="imgload" />
						</div>
						<div class="mui-col-xs-6 mui-col-sm-6 opens" :data-title="item.name" :data-type="item.type"  :data-id="item.goods_id" :data-url="item.url">
							<img src="../icon/mask-small.png" alt="" class="maximg" v-if="imgload" />
						</div>
						<div class="mui-col-xs-6 mui-col-sm-6 opens" :data-title="item.name" :data-type="item.type"  :data-id="item.goods_id" :data-url="item.url">
							<img src="../icon/mask-small.png" alt="" class="maximg" v-if="imgload" />
						</div>
						<div class="mui-col-xs-6 mui-col-sm-6 opens" :data-title="item.name" :data-type="item.type"  :data-id="item.goods_id" :data-url="item.url">
							<img src="../icon/mask-small.png" alt="" class="maximg" v-if="imgload" />
						</div>
					</div>
					<div class="opens" :data-type="item.type" :data-title="item.name"  :data-id="item.goods_id" :data-url="item.url">
						<img src="../icon/mask-2.jpg" alt="" class="maximg" v-if="imgload" />
					</div>  
				</div>
			</div>
			<div class="hot-item not-border">
				<div class="mui-content-padded">
					<div class="hot-title"><span>最热设备</span></div>
					<div class="mui-clearfix hot-facility">
						<div class="left opens" :data-type="item.type" :data-title="item.name"  :data-id="item.goods_id" :data-url="item.url">
							<img  src="../icon/mask-min2.jpg" alt="" class="maximg"  />
						</div>
						<div class="right">
							<div class="opens" :data-type="item.type" :data-title="item.name"  :data-id="item.goods_id" :data-url="item.url">
								<img src="../icon/mask-272.png" alt="" class="maximg" />
							</div>
							<div class="opens" :data-type="item.type" :data-title="item.name"  :data-id="item.goods_id" :data-url="item.url">
								<img src="../icon/mask-272.png" alt="" class="maximg" />
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="hot-item not-border ">
				<div class="mui-content-padded">
					<div class="hot-title"><span>优质演员</span></div>
					<div class="mui-clearfix hot-actor">
						<div class="swiper-container">
					    		<div class="swiper-wrapper">
				    				<div class="swiper-slide opens" :data-type="item.type" :data-id="item.goods_id" :data-url="item.url" :data-title="item.name">
				    					<img src="../icon/mask-3.jpg"  class="maximg"/>
				    				</div>
					    		</div>  
					    		<div class="swiper-pagination"></div>
					    	</div>
						<div class="mui-row">
							<div class="mui-col-xs-6 mui-col-sm-6 opens" :data-type="item.type" :data-title="item.name"  :data-id="item.goods_id" :data-url="item.url">
								<img  src="../icon/mask-min.png" alt="" class="maximg" v-if="imgload" />
								<p></p>
							</div>
							<div class="mui-col-xs-6 mui-col-sm-6 opens" :data-type="item.type" :data-title="item.name"  :data-id="item.goods_id" :data-url="item.url">
								<img  src="../icon/mask-min.png" alt="" class="maximg" v-if="imgload" />
								<p></p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="hot-item not-border">
				<div class="mui-content-padded">
					<div class="hot-title"><span>最热资讯</span></div>
					<div class="hot-find">
						<div class="swiper-container">
					    		<div class="swiper-wrapper">
				    				<div class="swiper-slide opens" :data-type="item.type" :data-id="item.goods_id" :data-url="item.url" :data-title="item.name">
				    					<img src="../icon/mask-3.jpg"  class="maximg" />
				    				</div>
					    		</div>  
					    		<div class="swiper-pagination"></div>
					    	</div>
						<ul class="mui-table-view">
						</ul>
					</div>
				</div>
			</div>
			<div class="hot-item"></div> 
			<div id="clased"></div>
		</div>
	</div>
<!--顶部轮播-->
<script type="text/html" id="top-Swiper">
	<div class="swiper-container">
	<div class="swiper-wrapper">
		{{each list}}
		<div class="swiper-slide opens" data-type="{{$value.type}}" data-id="{{$value.goods_id}}" data-url="{{$value.url}}" data-title="{{$value.name}}">
			<img data-src="{{$value.photo}}" src="../icon/mask-big.jpg" class="maximg swiper-lazy" />
		</div> 
		{{/each}}
	</div> 
	<div class="swiper-pagination"></div>
	</div>
</script>
<!--分类-->
<script type="text/html" id="nav-cls">
	{{each list}}
	<div class="mui-col-sm-3 mui-col-xs-3 link"  _id="newList" _title="{{$value.name}}" _href="newList.html" _extras="type={{$value.id}}"> 
		<img  data-lazyload="{{$value.photo}}" src="../icon/mask-min.png" alt=""   />
		<p>{{$value.name}}</p>
	</div>
	{{/each}}
</script>
<!--公共技术服务平台-->
<script type="text/html" id="pingtai">
	<div class="mui-content-padded">
		<div class="hot-title">公共技术服务平台</span></div>
		<div class="mui-row">
			{{each list}}
			<div class="mui-col-xs-12 mui-col-sm-12 link" _id="terrace" _href="terrace.html" _extras="gid={{$value.goods_id}}">
				<img data-lazyload="{{$value.photo}}" src="../icon/mask-704-180.jpg" alt="" />
			</div>
			{{/each}}
		</div>
	</div>
</script>
<!--最热场地-->
<script type="text/html" id="site">
	<div class="hot-title"><span>最热场地</span></div>
	<div class="mui-row hot-place">
		{{each list1}}
		<div class="mui-col-xs-6 mui-col-sm-6 opens" data-title="{{$value.name}}" data-type="{{$value.type}}"  data-id="{{$value.goods_id}}" data-url="{{$value.url}}">
			<img data-lazyload="{{$value.photo}}" src="../icon/mask-small.png" alt="" class="maximg" />
		</div>
		{{/each}}
	</div>
	{{each list2}}
	<div class="opens" data-type="{{$value.type}}" data-title="{{$value.name}}"  data-id="{{$value.goods_id}}" data-url="{{$value.url}}">
		<img data-lazyload="{{$value.photo}}" src="../icon/mask-2.jpg" alt="" class="maximg" />
	</div>
	{{/each}}
</script>
<!--最热设备-->
<script type="text/html" id="setUp">
	{{each list1}}
	<div class="left opens" data-type="{{$value.type}}" data-title="{{$value.name}}"  data-id="{{$value.goods_id}}" data-url="{{$value.url}}">
		<img  data-lazyload="{{$value.photo}}" src="../icon/mask-min2.jpg" alt="" class="maximg"  />
	</div>
	{{/each}}
	<div class="right">
		{{each list2}}
		<div class="opens" data-type="{{$value.type}}" data-title="{{$value.name}}"  data-id="{{$value.goods_id}}" data-url="{{$value.url}}">
			<img data-lazyload="{{$value.photo}}" src="../icon/mask-272.png" alt="" class="maximg" />
		</div>
		{{/each}}
	</div>
</script>
<!--优质演员-->
<script type="text/html" id="actor">
	<div class="swiper-container">
    		<div class="swiper-wrapper">
    			{{each list1}}
			<div class="swiper-slide opens" data-type="{{$value.type}}" data-id="{{$value.goods_id}}" data-url="{{$value.url}}" data-title="{{$value.name}}">
				<img data-src="{{$value.photo}}" src="../icon/mask-3.jpg"  class="maximg swiper-lazy"/>
			</div>
			{{/each}}
    		</div>  
    		<div class="swiper-pagination"></div>
    	</div>
	<div class="mui-row">
		{{each list2}}
		<div class="mui-col-xs-6 mui-col-sm-6 opens" data-type="{{$value.type}}" data-title="{{$value.name}}"  data-id="{{$value.goods_id}}" data-url="{{$value.url}}">
			<img  data-lazyload="{{$value.photo}}" src="../icon/mask-min.png" alt="" class="maximg" />
			<p>{{$value.name}}</p>
		</div>
		{{/each}}
	</div>
</script>
<!--最热资讯-->
<script type="text/html" id="finds">
	<div class="swiper-container">
    		<div class="swiper-wrapper">
    			{{each list1}}
			<div class="swiper-slide opens" data-type="{{$value.type}}" data-id="{{$value.goods_id}}" data-url="{{$value.url}}" data-title="{{$value.name}}">
				<img data-src="{{$value.photo}}" src="../icon/mask-3.jpg"  class="maximg swiper-lazy" />
			</div>
			{{/each}}
    		</div>  
    		<div class="swiper-pagination"></div> 
    	</div>
	<ul class="mui-table-view">
		{{each list2}}
	    <li class="mui-table-view-cell mui-media link" _id="findDetail" _href="findDetail.html" _extras="fid={{$value.id}}" _title="发现">
	        <a href="javascript:;">
	            <img class="mui-media-object mui-pull-left" data-lazyload="{{$value.photo}}" src="../icon/mask-272.png"  />
	            <div class="mui-media-body">
	                <div class="title">{{$value.title}}</div>
	            </div>
	            <p class="nd"><span>阅读({{$value.read_num}})</span><span>赞({{$value.num}})</span></p>
	        </a>
	    </li>
	    {{/each}}
	</ul>
</script>
<script type="text/html" id="list">
	{{each list}}
		<div class="type-item temped">
			<div class="item-title">{{$value.name}}</div>
			<div class="swiper-container">
				<div class="swiper-wrapper">
					{{each $value.goods item key}}
						<div class="swiper-slide link" _id="detail" _href="detail.html" _extras="pid={{item.id}}">
							<img  data-src="{{item.img}}" src="../icon/mask-272.png" class="swiper-lazy"   alt=""   />
							{{if item.id != 3}}
							<p class="metcha"><img src="{{item.logo}}" alt="" />{{item.shop_name}}</p>
							{{/if}}
							<p>{{item.name}}</p>
							{{if item.id !=3 && item.id != 2}}
								<p class="prices">¥ {{item.price}}</p>
							{{else}}
								{{if item.price !='0/天'}}
									<p class="prices">¥ {{item.price}}</p>
								{{else}}
									<p class="prices" v-else>询价</p>
								{{/if}}
							{{/if}}
						</div>
					{{/each}}
				</div>
			</div>
		</div>
	{{/each}}
</script>
<script src="../js/mui.js"></script>
<!--<script src="../js/vue.min.js"></script>-->
<script src="../js/template-web.js"></script>
<script src="../js/swiper.min.js"></script>
<script src="../js/mui.lazyload.js"></script>
<script src="../js/mui.lazyload.img.js"></script>
<script src="../js/bexta.js"></script>
<script type="text/javascript">
	var apps, views, lazyLoad;
	mui.init({
		beforeback:function(){
			plus.webview.getLaunchWebview().evalJS("mui.back()");
			return false;
		}
	});
	mui.plusReady(function () {
	    views = bexta.getWebview();
	    plus.navigator.closeSplashscreen();
	    	bexta.ajax(api.newsite, function(res){
	    		//事件外理
	    		lazyLoad = mui(document).imageLazyload({
				placeholder: '../icon/mask-min.png',
				diff:50,
				autoDestroy: false
			});
	    		setData(res);
	    		initEvent();
	    		
	    	}, {});
	});
	function setData(res){
		//头部轮播图
    		temp.top(res.ad);
    		//分类
    		temp.nav(res.classes);
    		//服务平台
    		if( res.shopad.length > 0 ){
    			temp.platform(res.shopad);
    		}
    		//最热设备
    		temp.hotSetUp(res.adthree, res.adfour);
    		//最热场地
    		temp.hotSite(res.adone, res.adtwo);
    		//优质演员
    		temp.hotActor(res.adfive, res.adsix);
    		//最热资讯
    		temp.hotFinds(res.adseven, res.find_list);
    		//下方的列表
    		temp.recommend(res.classes);
		lazyLoad.refresh(true);
	}
	var temp = {
		$:function(id){return document.getElementById('id')},
		top:function(data){
			var sourhtml = template('top-Swiper', {list:data});
			document.querySelector('#topSwiper ').innerHTML = sourhtml;
			var mySwiper = new Swiper ('#topSwiper .swiper-container', { 
				    loop: true,
				    autoplay:4000,
				    pagination:'.swiper-pagination',
				    lazyLoading:true,
				    lazyLoadingInPrevNext:true,
		    			lazyLoadingOnTransitionStart:true
		    });
		    var topBullets = document.querySelector('#topSwiper .swiper-pagination-bullets')
			topBullets.style.marginLeft = -(topBullets.clientWidth/2)+'px';
		},
		nav:function(data){
			var sourhtml = template('nav-cls', {list:data});
			document.querySelector('.clstype .mui-row').innerHTML = sourhtml;
		},
		platform:function(data){
			var sourhtml = template('pingtai', {list:data});
			document.querySelector('.serverpingtai').innerHTML = sourhtml;
		},
		hotSetUp:function(data1, data2){
			var sourHtml = template('setUp', {list1:data1, list2:data2});
			document.querySelector('.hot-facility').innerHTML = sourHtml;
		},
		hotSite:function(data1, data2){
			var sourHtml = template('site', {list1:data1, list2:data2});
			document.querySelector('.hot-site').innerHTML =sourHtml;
		},
		hotActor:function(data1, data2){
			var sourHtml = template('actor', {list1:data1, list2:data2});
			document.querySelector('.hot-actor').innerHTML =sourHtml;
			var mySwiper = new Swiper ('.hot-actor .swiper-container', { 
				    loop: true,
				    autoplay:4000,
				    pagination:'.swiper-pagination',
				    lazyLoading:true,
				    lazyLoadingInPrevNext:true,
		    			lazyLoadingOnTransitionStart:true
		    });
		},
		hotFinds:function(data1, data2) {
			var sourHtml = template('finds', {list1:data1, list2:data2});
			document.querySelector('.hot-find').innerHTML =sourHtml;
			var mySwiper = new Swiper ('.hot-find .swiper-container', { 
				    loop: true,
				    autoplay:4000,
				    pagination:'.swiper-pagination',
				    lazyLoading:true,
				    lazyLoadingInPrevNext:true,
		    			lazyLoadingOnTransitionStart:true
		    });
		},
		recommend:function(data){
			var sourHtml = template('list', {list:data});
			document.querySelector('#clased').innerHTML =sourHtml;
			new Swiper('.temped .swiper-container', {
				slidesPerView: 1.5, //同时能显示多少个
				paginationClickable: false,
				spaceBetween: "3%", //右间距
				slidesOffsetBefore: 15,
				slidesOffsetAfter: 15,
				freeMode: false, //使用惯性滑动
				lazyLoading:true,
				lazyLoadingInPrevNext:true,
		    		lazyLoadingOnTransitionStart:true
			});
		}
	}
	function initEvent(){
		mui('body').on('tap', '.opens', function(evt){
			var type = this.getAttribute('data-type');
			if( type == 0 ){
				//内连商品详情
				var gid = this.getAttribute('data-id'); 
				if( !gid ) return ;
				mui.openWindow({
		    			id:'detail',
		    			url:'detail.html',
		    			show:{autoShow:true,aniShow:'pop-in'},
						waiting:{autoShow:false},
		    			extras:{
		    				pid:gid
		    			}
			    	});
			}else if( type == 1 ){
				//处连
				var urls = this.getAttribute('data-url'),
					name = this.getAttribute('data-title');
				if( !urls ) return ;
				bexta.openWithTitle({
		    			id:'external', 
		    			url:'external.html', 
		    			show:{autoShow:true,aniShow:'pop-in'},
					waiting:{autoShow:false},
		    			extras:{
		    				ourls:urls
		    			}
		    		},{
		    			title:{
		    				text:name
		    			}
		    		});
			}else{
				//发现详情
				var gid = this.getAttribute('data-id');
				if( !gid ) return ;
				bexta.openWithTitle({
		    			id:'findDetail',
		    			url:'findDetail.html',
		    			show:{autoShow:true,aniShow:'pop-in'},
						waiting:{autoShow:false},
		    			extras:{
		    				fid:gid
		    			}
			    	},{
			    		title:{
			    			text:"详情"
			    		}
			    	});
			}
				
		});
		views.setPullToRefresh({
	    		support: true,
			height: 50 + bexta.getStorage() + 'px',
			range: '100px',
			style: 'default',
			contentdown:{
				caption:"下拉可刷新"
			},
			contentover:{
				caption:"释放刷新"
			},
			contentrefresh:{
				caption:"正在刷新"
			}
	    }, function(){
		    	bexta.ajax(api.newsite, function(res){
		    		setData(res)
		   		views.endPullToRefresh();
		   },{});
	    });
	}
</script>
</body>
</html>